<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <!-- <el-form-item>
        <el-input v-model="dataForm.deviceName" placeholder="设备名称" clearable></el-input>
      </el-form-item> -->
      <el-form-item>
       <el-select
       v-model="searchBy"
       clearable
       placeholder="请选择索引方式"
       @change="search()"
       >
      <el-option
      v-for="item in searchByOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      />
      </el-select>
      </el-form-item>


      <el-form-item>
        <el-input v-model="searchQuery" :placeholder="getPlaceholder()" clearable></el-input>
      </el-form-item>


      <el-form-item>
        <el-button @click="search()" type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" header-align="center" align="center" label="序号" width="80" />
      <el-table-column prop="deviceId" header-align="center" align="center" label="设备编号" />
      <el-table-column prop="deviceName" header-align="center" align="center" label="设备名称" />
      <el-table-column prop="errorTime" header-align="center" align="center" label="故障时长" />
      <el-table-column prop="avgSloveTime" header-align="center" align="center" label="平均解决时长" />
      <el-table-column prop="alarmCount" header-align="center" align="center" label="报警次数" />
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100, 500, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        deviceId: '',
        deviceName: '',
        errorTime: '',
        avgSloveTime: '',
        alarmCount: 0,
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      searchByOptions: [
        { value: 'name', label: '设备名称' },
        { value: 'deviceId', label: '设备编号' },
      ],
      searchBy:"name",
      searchQuery: '',
     
    };
  },
  activated() {
    this.getDataList();
  },
  methods: {
    getPlaceholder() {
      return this.searchBy === 'name' ? '请输入设备名称' : '请输入设备编号';
    },
    tableRowClassName({row, rowIndex}) {
          const remainder = rowIndex % 4;
            if (remainder === 0) return 'warning-row';  // 第1行（索引0）
            if (remainder === 2) return 'success-row';  // 第3行（索引2）
            return '';  // 第2行（索引1）无颜色
        
      },
    // 查询
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 天时分秒转秒
    convertToSeconds(timeStr) {
      const daysMatch = timeStr.match(/(\d+)天/);
      const hoursMatch = timeStr.match(/(\d+)时/);
      const minutesMatch = timeStr.match(/(\d+)分/);
      const secondsMatch = timeStr.match(/(\d+)秒/);

      const days = daysMatch ? parseInt(daysMatch[1]) : 0;
      const hours = hoursMatch ? parseInt(hoursMatch[1]) : 0;
      const minutes = minutesMatch ? parseInt(minutesMatch[1]) : 0;
      const seconds = secondsMatch ? parseInt(secondsMatch[1]) : 0;

      return days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
    },
    // 秒转天时分秒（优化0不显示）
    convertSecondsToTime(seconds) {
      const days = Math.floor(seconds / (24 * 60 * 60));
      seconds %= 24 * 60 * 60;
      const hours = Math.floor(seconds / (60 * 60));
      seconds %= 60 * 60;
      const minutes = Math.floor(seconds / 60);
      const sec = seconds % 60;

      let timeStr = '';
      if (days > 0) timeStr += `${days}天`;
      if (hours > 0) timeStr += `${hours}时`;
      if (minutes > 0) timeStr += `${minutes}分`;
      if (sec > 0) timeStr += `${sec}秒`;
      return timeStr || '0秒'; // 处理全0的情况
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        [this.searchBy]: this.searchQuery
      };
      this.$http({
        url: this.$http.adornUrl('/dss/operation/errorList'),
        method: 'get',
        params: this.$http.adornParams(params),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.dataList.forEach(item => {
            const totalSeconds = this.convertToSeconds(item.errorTime);
            const alarmCount = Number(item.alarmCount) || 1; // 避免除以0
            const avgSeconds = Math.floor(totalSeconds / alarmCount);
            item.avgSloveTime = this.convertSecondsToTime(avgSeconds);
          });
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>